<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>日历</title>
		<meta name="description" content="Restyling jQuery UI Widgets and Elements" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<!-- basic styles -->

		<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="assets/css/font-awesome.min.css" />

		<!--[if IE 7]>
		  <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
		<![endif]-->

		<!-- page specific plugin styles -->

		<link rel="stylesheet" href="assets/css/fullcalendar.css" />

		<!-- fonts -->

		<!-- <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" />

		<!-- ace styles -->

		<link rel="stylesheet" href="assets/css/ace.min.css" />
		<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
		<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
 <!--[if lte IE 8]>
		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->

		<script src="assets/js/ace-extra.min.js"></script>

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

		<!--[if lt IE 9]>
		<script src="assets/js/html5shiv.js"></script>
		<script src="assets/js/respond.min.js"></script>
		<![endif]-->
	</head>

	<body class="no-skin">
		<!-- #section:basics/navbar.layout -->
		
			<!-- /section:basics/sidebar -->
			<div class="main-content">
				<!-- #section:basics/content.breadcrumbs -->

			<!-- /section:basics/content.breadcrumbs -->
				<div class="page-content">

					<!-- /section:settings.box -->
					<div class="page-content-area">
						<div class="row" style="width: 95%">
							<h1>请选择预约时间</h1>
							<div class="col-xs-12">
								<div class="row" >
									<div class="col-sm-9">
										<div class="space"></div>

										<div id="calendar"></div>
									</div>

									<div class="col-sm-3" >
										<div class="widget-box transparent">
											<div class="widget-header">
												<h4>请将时间段拖拽到预约日期</h4>
											</div>

											<div class="widget-body">
												<div class="widget-main no-padding">
													<div id="external-events">
														<div class="external-event label-grey" data-class="label-grey">
															<i class="icon-move"></i>
															10 : 00 - 12 : 00
														</div>

														<div class="external-event label-success" data-class="label-success">
															<i class="icon-move"></i>
															12 : 00 - 14 : 00
														</div>

														<div class="external-event label-danger" data-class="label-danger">
															<i class="icon-move"></i>
															14 : 00 - 16 : 00
														</div>

														<div class="external-event label-purple" data-class="label-purple">
															<i class="icon-move"></i>
															16 : 00 - 18 : 00
														</div>

														<div class="external-event label-yellow" data-class="label-yellow">
															<i class="icon-move"></i>
															18 : 00 - 20 : 00
														</div>

														<div class="external-event label-pink" data-class="label-pink">
															<i class="icon-move"></i>
															20 : 00 - 21 : 00
														</div>

														<div class="external-event label-info" data-class="label-info">
															<i class="icon-move"></i>
															21 : 00 - 22 : 00
														</div>
														<br>
														<div class="btn-warning">为避免您排队等候，请您尽量不要选择图上已经有标注的时间段！</div>
														<br>
														<div id="myAlert" class="alert alert-success">
															<a href="#" class="close" data-dismiss="alert">&times;</a>
															<strong>Tips！</strong>高级会员预约时间可以到秒，如您需要成为高级会员请到店内登记办理。
															<!--理论上可以实现线上办理会员，但是，这样很难判断信息的真实性，而且也无法根据客户的具体信息展开针对性的营销
															（到店可以详细询问详细察看发质发型等），到店也可以方便店员熟悉高级会员的样子。。。-->
														</div>
														<!--<div class="alert alert-warning">-->
															<!--<a href="#" class="close" data-dismiss="alert">-->
																<!--&times;-->
															<!--</a>-->
															<!--<strong>注意！</strong>底色为黄色的部分为理发师安排的休息时间，如您时间宽松，请选其他日期。-->
														<!--</div>-->
														<!--<div class="form-group">-->
															<!--<div class="col-sm-10">-->
																<!--<button type="submit" class="btn btn-default" id="bookingTimeSub">提交预约时间</button>-->
															<!--</div>-->
														<!--</div>-->
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content-area -->
				</div><!-- /.page-content -->
			</div><!-- /.main-content -->



			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
				<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
			</a>
		</div><!-- /.main-container -->

		<!-- basic scripts -->



		<!--[if !IE]> -->

		<script type="text/javascript">
			window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
		</script>

		<!-- <![endif]-->

		<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<![endif]-->

		<script type="text/javascript">
			if("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="assets/js/bootstrap.min.js"></script>
		<!-- <script src="assets/js/typeahead-bs2.min.js"></script> -->

		<!-- page specific plugin scripts -->

		<script src="assets/js/jquery-ui-1.10.3.custom.min.js"></script>
		<script src="assets/js/jquery.ui.touch-punch.min.js"></script>
		<script src="assets/js/fullcalendar.min.js"></script>
		<!-- <script src="assets/js/bootbox.min.js"></script> -->

		<!-- ace scripts -->

		

		<!-- inline scripts related to this page -->

		<script type="text/javascript">
            var date_temp=null;
            var time_temp=null;
			jQuery(function($) {

/* initialize the external events
	-----------------------------------------------------------------*/

	$('#external-events div.external-event').each(function() {

		// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
		// it doesn't need to have a start or end
		var eventObject = {
			title: $.trim($(this).text()) // use the element's text as the event title
		};

		// store the Event Object in the DOM element so we can get to it later
		$(this).data('eventObject', eventObject);
		// console.log("这个是事件源的数据："+$(this).data('eventObject', eventObject).title);
		// make the event draggable using jQuery UI
		$(this).draggable({
			zIndex: 999,
			revert: true,      // will cause the event to go back to its
			revertDuration: 0  //  original position after the drag
		});
		
	});




	/* initialize the calendar
	-----------------------------------------------------------------*/

	var date = new Date();
	var d = date.getDate();
	var m = date.getMonth();
	var y = date.getFullYear();



	var calendar = $('#calendar').fullCalendar({
		 buttonText: {
			prev: '<i class="icon-chevron-left"></i>',
			next: '<i class="icon-chevron-right"></i>'
		},
	
		header: {
			left: 'prev,next today',
			center: 'title',
			right: 'month,agendaWeek,agendaDay'
		},
		events: [
		{
			title: 'Booking by Mr.Huang',
			start: new Date(y, m, d+1),
			className: 'label-important'
		},
            {
                title: 'Booking by Mr.Po',
                start: new Date(y, m, d+9),
                className: 'label-important'
            },
            {
                title: 'Booking by Mr.Xu',
                start: new Date(y, m, 6),
                className: 'label-important'
            },
		{
			title: '休息时间',
			start: new Date(y, m, d-5),
			end: new Date(y, m, d-2),
			className: 'label-success'
		},
		{
			title: 'Booking by Ms.Su',
			start: new Date(y, m, d-3, 16, 0),
			allDay: false
		}]
		,
		editable: true,
		droppable: true, // this allows things to be dropped onto the calendar !!!
		drop: function(date, allDay) { // this function is called when something is dropped
            if(!confirm("确定选择该日期？")){
                return
			}
			// retrieve the dropped element's stored Event Object
			var originalEventObject = $(this).data('eventObject');
			var $extraEventClass = $(this).attr('data-class');
			// console.log($extraEventClass);

			// we need to copy it, so that multiple events don't have a reference to the same object
			var copiedEventObject = $.extend({}, originalEventObject);
            date_temp=date;
            time_temp=copiedEventObject.title;
            console.log("date"+date_temp);
            console.log(time_temp);
            chuanzhi();
            // alert();
            // $(window.parent).f(date_temp,time_temp);
			// assign it the date that was reported
			copiedEventObject.start = date;
			copiedEventObject.allDay = allDay;
			if($extraEventClass) copiedEventObject['className'] = [$extraEventClass];
			
			// render the event on the calendar
			// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
			$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
			
			// is the "remove after drop" checkbox checked?
			if ($('#drop-remove').is(':checked')) {
				// if so, remove the element from the "Draggable Events" list
				// console.log($(this).title);
				$(this).remove();
			}
			
		}
		,
		selectable: true,
		selectHelper: true,
		select: function(start, end, allDay) {
			
			bootbox.prompt("New Event Title:", function(title) {
				if (title !== null) {
					calendar.fullCalendar('renderEvent',
						{
							title: title,
							start: start,
							end: end,
							allDay: allDay
						},
						true // make the event "stick"
					);
				}
			});
			

			calendar.fullCalendar('unselect');
			
		}
		,
		eventClick: function(calEvent, jsEvent, view) {

			var form = $("<form class='form-inline'><label>Change event name &nbsp;</label></form>");
			form.append("<input class='middle' autocomplete=off type=text value='" + calEvent.title + "' /> ");
			form.append("<button type='submit' class='btn btn-sm btn-success'><i class='icon-ok'></i> Save</button>");
			
			var div = bootbox.dialog({
				message: form,
			
				buttons: {
					"delete" : {
						"label" : "<i class='icon-trash'></i> Delete Event",
						"className" : "btn-sm btn-danger",
						"callback": function() {
							calendar.fullCalendar('removeEvents' , function(ev){
								return (ev._id == calEvent._id);
							})
						}
					} ,
					"close" : {
						"label" : "<i class='icon-remove'></i> Close",
						"className" : "btn-sm"
					} 
				}

			});
			
			form.on('submit', function(){
				calEvent.title = form.find("input[type=text]").val();
				calendar.fullCalendar('updateEvent', calEvent);
				div.modal("hide");
				return false;
			});
			
		
			console.log(calEvent.id);
			console.log(jsEvent);
			console.log(view);

			// change the border color just for fun
			$(this).css('border-color', 'red');

		}
		
	});


});
			function chuanzhi() {
                window.parent.f123(date_temp,time_temp);
            }
		</script>

	</body>
</html>
